<!DOCTYPE html>
<!-- 
    载入静态文件
    使用 Django 3 学习的读者改为 {% load static %}
-->
{% load static %}
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>二两酥肉的博客</title>
  
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans'>

  <link rel="stylesheet" href="{% static 'css/index.css' %}">
  <style>
    .el:nth-child(1) .el__bg:before {
      background-image: url({{ seriesbg1.avatar }});
    }
    .el:nth-child(2) .el__bg:before {
      background-image: url({{ seriesbg2.avatar }});
    }
    .el:nth-child(3) .el__bg:before {
      background-image: url({{ seriesbg3.avatar }});
    }
    .el:nth-child(4) .el__bg:before {
      background-image: url({{ seriesbg4.avatar }});
    }
    .el:nth-child(5) .el__bg:before {
      background-image: url({{ seriesbg5.avatar }});
    }
    </style>
  
</head>

<body>
<div style="text-align:center;clear:both">
</div>
  <div class="cont s--inactive">
  <!-- cont inner start -->
  <div class="cont__inner">
    <!-- el start -->
    <div class="el">
      <div class="el__overflow">
        <div class="el__inner">
          <div class="el__bg"></div>
          <div class="el__preview-cont">
            <h2 class="el__heading">
              Section 1
              <br>
              学习笔记
            </h2>
          </div>
          
          <div class="el__content">
            <a href="/article/article-list" style="text-decoration: none">
              <div class="el__box">
              虽然经常摸鱼，但是还是会经历更新自己的学习笔记。
              </div>
              <div class="el__text">
                click
              </div>
            </a>
            <div class="el__close-btn"></div>
          </div>
        
        </div>
      </div>
      <div class="el__index">
        <div class="el__index-back">1</div>
        <div class="el__index-front">
          <div class="el__index-overlay" data-index="1">1</div>
        </div>
      </div>
    </div>
    <!-- el end -->
    <!-- el start -->
    <div class="el">
      <div class="el__overflow">
        <div class="el__inner" >
          <div class="el__bg" ></div>
          <div class="el__preview-cont">
            <h2 class="el__heading">
              Section 2
              <br>
              项目记录
            </h2>
          </div>
          <div class="el__content">
            <a href="/project/project-list" style="text-decoration: none">
              <div class="el__box">
              记录一下完成的项目，虽然没人star,但是好歹留个纪念。
              </div>
              <div class="el__text">
                click
              </div>
            </a>
            <div class="el__close-btn"></div>
          </div>
        </div>
      </div>
      <div class="el__index">
        <div class="el__index-back">2</div>
        <div class="el__index-front">
          <div class="el__index-overlay" data-index="2">2</div>
        </div>
      </div>
    </div>
    <!-- el end -->
    <!-- el start -->
    <div class="el">
      <div class="el__overflow">
        <div class="el__inner">
          <div class="el__bg"></div>
          <div class="el__preview-cont">
            <h2 class="el__heading">
              Section 3
              <br>
              学术成果
            </h2>
          </div>
          <div class="el__content">
            <a href="/scholar/scholar-list" style="text-decoration: none">
              <div class="el__box">
              一些学术垃圾罢了。
              </div>
              <div class="el__text">
                click
              </div>
            </a>
            <div class="el__close-btn"></div>
          </div>
        </div>
      </div>
      <div class="el__index">
        <div class="el__index-back">3</div>
        <div class="el__index-front">
          <div class="el__index-overlay" data-index="3">3</div>
        </div>
      </div>
    </div>
    <!-- el end -->
    <!-- el start -->
    <div class="el">
      <div class="el__overflow">
        <div class="el__inner">
          <div class="el__bg"></div>
          <div class="el__preview-cont">
            <h2 class="el__heading">
              Section 4
              <br>
              个人经历
            </h2>
          </div>
          <div class="el__content">
            <a href="/life/life-list" style="text-decoration: none">
              <div class="el__box">
              虽说想着诗和远方，但是看了看眼前的饭碗，默默的吃了起来...
              </div>
              <div class="el__text">
                click
              </div>
            </a>
            <div class="el__close-btn"></div>
          </div>
        </div>
      </div>
      <div class="el__index">
        <div class="el__index-back">4</div>
        <div class="el__index-front">
          <div class="el__index-overlay" data-index="4">4</div>
        </div>
      </div>
    </div>
    <!-- el end -->
    <!-- el start -->
    <div class="el">
      <div class="el__overflow">
        <div class="el__inner">
          <div class="el__bg"></div>
          <div class="el__preview-cont">
            <h2 class="el__heading">
              Section 5
              <br>
              个人简历
            </h2>
          </div>
          <div class="el__content">
            <a href="/myself" style="text-decoration: none">
              <div class="el__box">
              一个平凡的胖子...也许能变瘦呢？
              </div>
              <div class="el__text">
                click
              </div>
            </a>
            <div class="el__close-btn"></div>
          </div>
        </div>
      </div>
      <div class="el__index">
        <div class="el__index-back">5</div>
        <div class="el__index-front">
          <div class="el__index-overlay" data-index="5">5</div>
        </div>
      </div>
    </div>
    <!-- el end -->
  </div>
  <!-- cont inner end -->
</div>

<script>
      var $cont = document.querySelector('.cont');
      var $elsArr = [].slice.call(document.querySelectorAll('.el'));
      var $closeBtnsArr = [].slice.call(document.querySelectorAll('.el__close-btn'));

      setTimeout(function() {
        $cont.classList.remove('s--inactive');
      }, 200);

      $elsArr.forEach(function($el) {
        $el.addEventListener('click', function() {
          if (this.classList.contains('s--active')) return;
          $cont.classList.add('s--el-active');
          this.classList.add('s--active');
        });
      });

      $closeBtnsArr.forEach(function($btn) {
        $btn.addEventListener('click', function(e) {
          e.stopPropagation();
          $cont.classList.remove('s--el-active');
          document.querySelector('.el.s--active').classList.remove('s--active');
        });
      });
</script>

</body>

</html>
